<template>
  <div class="metaPool-home">
     <newNav :selNum="selNum"/>
     <div class="metaPool-menu">
       <img class="metaPool-img1" src="../assets/icon-pool.svg" alt="">
       <div class="metaPool-titleb">MetaPool</div>
       <div class="metaPool-titles">{{$t('user.NexgenerationDeFi')}}</div>
       <div class="metaPool-titles">{{$t('user.Miningisonlyp')}}</div>
       <div v-if="showGetpeth">
        <div class="left-arrow" @click="back">
          <a-icon type="arrow-left" />
        </div>
         <div class="metaPool-flex">
           <div class="flex-item1 bordersty">
              <img class="warnImg" v-if="sevenTime == 0" src="../assets/icon-list-warn.svg" @click="boardCli" :title="$t('user.Earlyreleasehe')" alt="">
              <!-- <div v-else>
                <img class="imgtop-right" src="../assets/farm-icon-tag-bg.png" alt="">
                <div class="time">
                  <img src="../assets/farm-icon-time.png" alt="">
                  <div>{{this.hours7}}:{{this.minutes7}}:{{this.seconds7}}</div>
                </div>
              </div> -->
              <img src="../assets/icon-harvest.svg" alt="">
              <div class="flex-text">{{ incomeMFI == 0?incomeMFI:utils.weiOneth(incomeMFI).toFixed(6) }}</div>
              <div class="flex-menu">{{$t('user.expectedearnings')}}</div>
	      <div v-if="showHarvest" class="flex-btn pointer-events">{{$t('user.Harvest')}}</div>
              <div v-else :class="incomeMFI == 0?'flex-btn pointer-events':'flex-btn'" @click="harvest()">{{$t('user.Harvest')}}</div>
	      <div v-if="showHarvest" style="font-size: 12px;color: #EFB133; margin-top: 10px;margin-bottom: 5px;padding: 0px 48px;">
                {{$t('user.ledgeateast',{tokenNum:utils.weiOneth(contributionAmount-userStakedAmount)>0.15?utils.weiOneth(contributionAmount-userStakedAmount).toFixed(2):0.15})}}
                <img src="../assets/board-icon-what.svg" @click="jumpRule">
              </div>
            </div>
            <div :class="!showApprove?'flex-item3':'flex-item3 boxOnly'">
              <img v-if="!showApprove" src="../assets/icon-pledge.svg" alt="">
              <div v-if="showApprove">
                <div class="flex-btn" @click="approve" :style="!showApprove?'':'margin-top:-45px;'">{{$t('user.Approve')}}</div>
              </div>
              <div v-else>
                <div class="flex-text colorfff">{{utils.weiOneth(userStakedAmount).toFixed(6)}}</div>
                <div class="flex-menu colorfff">{{$t('user.userStakedpETH')}}</div>
                <div class="flex-input">
                  <input type="number" v-model="stakeNum">
                  <div @click="stake">{{$t('user.Stake')}}</div>
                </div>
                <div class="flex-balance colorfff">{{$t('user.currentpETHbalance')}} {{currentpETH.toFixed(2)}}</div>
              </div>
              <!-- 获取LP -->
              <!-- <div class="flex-getLp">
                <span>{{$t('user.GettheLP')}}</span>
                <img src="../assets/icon-more.svg" alt="">
              </div> -->
            </div>
            <div class="flex-item2">
              <div class="item2-top">
                <!-- <span>{{100*userStakedAmount / thenumberstakedAll}}%</span>
                <span>+</span>
                <span>{{100*contributionAmount / thenumberstakedAll}}%</span> -->
                <span>{{contributionAmount == 0?contributionAmount:utils.weiOneth(contributionAmount).toFixed(6)}}</span>
              </div>
              <div class="item2-text">
                <!-- <div>{{$t('user.ProportionofpETH')}}</div> -->
                <div>
                  <span>{{$t('user.invitation')}}</span>
                  <a-tooltip>
                    <template slot="title">
                      {{$t('user.notInvitedTooltip')}}
                    </template>
                    <img src="../assets/board-icon-what.svg" alt="" @click="jumpRule">
                  </a-tooltip>
                </div>
              </div>
              <div class="item2-title">{{$t('user.Thebestproportion')}}:</div>
              <!-- <div class="item2-bei">
                <div>最差（1倍）{{$t('user.NexgenerationDeFi')}}</div>
                <div>质押0~100pETH</div>
              </div> -->
              <div class="item2-bei">
                <div class="background-colorff7">{{$t('user.CommonZone')}} ({{$t('user.X2')}})</div>
                <!-- <div>{{$t('user.Stake')}}0~ {{utils.weiOneth(averageStake[poolType-1] * 1.16).toFixed(3)}}pETH</div> -->
                <div>{{$t('user.Stake')}}0 ~ 0.14pETH</div>
              </div>
              <div class="item2-bei">
                <div class="background-color259">{{$t('user.BestZone')}} ({{$t('user.X3')}})</div>
                <!-- <div>{{$t('user.Stake')}}{{utils.weiOneth(averageStake[poolType-1] * 1.16).toFixed(3)}}~ {{utils.weiOneth(averageStake[poolType-1] * 2).toFixed(3)}}pETH</div> -->
                <div>{{$t('user.Stake')}}0.14 ~ 0.3pETH</div>
              </div>
              <div class="item2-bei">
                <div>{{$t('user.WorstZone')}} ({{$t('user.X1')}})</div>
                <!-- <div>{{$t('user.Stake')}}{{utils.weiOneth(averageStake[poolType-1] * 2).toFixed(3)}}~ ∞pETH</div> -->
                <div>{{$t('user.Stake')}}0.3 ~ ∞pETH</div>
              </div>
            </div>
         </div>
         <div class="metaPool-get" @click="harvestUnstake">{{$t('user.HarvestUnstake')}}</div>
         <div class="metaPool-jump">
           <span>{{$t('user.TradingMFI')}}</span>
           <!-- {{$t('user.pETfinitely', { stakedPeth: 100 })}} -->
           <img src="../assets/icon-more.svg" alt="">
         </div>
       </div>
       <div v-else>
          <div class="metaPool-balance">
            <div class="balance-left">
              <div>
                <div>{{ this.utils.weiOneth(totalMFI).toFixed(6) }}</div>
                <div class="font14">{{$t('user.MFItotalbalance')}}</div>
              </div>
              <div>
                <img src="../assets/pool-icon-logo.png" alt="">
              </div>
            </div>
            <div class="balance-right">
              <div>
                <div>0 $/MFI</div>
                <div class="font14 color5">{{$t('user.price')}}</div>
              </div>
              <div>
                <div>0</div>
                <div class="font14 color5">{{$t('user.valuePr')}}</div>
              </div>
              <div>
                <div>210,000MFI</div>
                <div class="font14 color5">{{$t('user.totalcirculation')}}</div>
              </div>
            </div>
          </div>
          <!-- <div class="metaPool-balance">
            <div class="balance-left">
              <div>
                <div>998,754</div>
                <div class="font14">{{$t('user.Thenumberstaked')}}</div>
              </div>
              <div>
                <img src="../assets/pool-icon-logo1.svg" alt="">
              </div>
            </div>
            <div class="balance-right">
              <div>
                <div>0,000,000</div>
                <div class="font14 color5">{{$t('user.pETHcirculation')}}</div>
              </div>
              <div>
                <div>5,655,652</div>
                <div class="font14 color5">{{$t('user.TheETHapprove')}}</div>
              </div>
            </div>
          </div> -->
          <div class="metaPool-time">
            <!-- <div class="time-ing marginrignt44">
              <div>
                <img class="imgtop-right" src="../assets/farm-icon-tag-grey-bg.png" alt="">
              </div>
              <div class="time" style="right: 13px;top: 10px;">
                <img src="../assets/farm-icon-time-white.png" alt="">
                <div style="color: #fff;">{{$t('user.ended')}}</div>
              </div>
              <img class="imgmiddle" src="../assets/pool-icon-peth.png" alt="">
              <div class="time-text1">pETH{{$t('user.pETHpool')}}</div>
              <div class="time-text2">
                <span>{{thenumberstakedAll[0] == 0?thenumberstakedAll[0]:utils.weiOneth(thenumberstakedAll[0]).toFixed(6)}}</span>
              </div>
              <div class="time-text3">{{$t('user.Thenumberstaked')}}</div>
              <div class="time-btn"  @click="metaPoolDetail(1)" v-if="!showRegister[0]">{{$t('user.Authorizedto')}}</div>
              <div class="time-btn"  @click="registerMFI(1)" v-else>{{$t('user.Registered')}}</div>
              <div class="time-bottom">
                <span>{{$t('user.SmartContractAddressz')}}</span>
                <img src="../assets/icon-more.svg" alt="">
              </div>
            </div> -->
            <div class="time-ing marginrignt44">
              <div>
                <img class="imgtop-left" src="../assets/farm-icon-tag.png" alt="">
                <img class="imgtop-right" src="../assets/farm-icon-tag-bg.png" alt="">
              </div>
              <div class="time">
                <img src="../assets/farm-icon-time.png" alt="">
                <div>{{this.hours}}:{{this.minutes}}:{{this.seconds}}</div>
              </div>
              <img class="imgmiddle" src="../assets/pool-icon-peth.png" alt="">
              <div class="time-text1">pETH{{$t('user.pETHpool')}}</div>
              <!-- 年化收益率 -->
              <div class="time-text2">
                <span>{{thenumberstakedAll[1] == 0?thenumberstakedAll[1]:utils.weiOneth(Number(thenumberstakedAll[1])).toFixed(6)}}</span>
                <!-- <span>%</span>    -->
              </div>
              <div class="time-text3">{{$t('user.Thenumberstaked')}}</div>
              <div class="time-btn"  @click="metaPoolDetail(2)" v-if="!showRegister[1]">{{$t('user.Authorizedto')}}</div>
              <div class="time-btn"  @click="registerMFI(2)" v-else>{{$t('user.Registered')}}</div>
              <div class="time-bottom">
                <span>{{$t('user.SmartContractAddressz')}}</span>
                <img src="../assets/icon-more.svg" alt="">
              </div>
            </div>
            <!-- <div class="time-end">
              <div>
                <img class="imgtop-right" src="../assets/farm-icon-tag-grey-bg.png" alt="">
              </div>
              <div class="time">
                <img src="../assets/farm-icon-time-white.png" alt="">
                <div>{{$t('user.ended')}}</div>
              </div>
              <img class="imgmiddle" src="../assets/pool-icon-peth.png" alt="">
              <div class="time-text1">pETH{{$t('user.pETHpool')}}</div>
              <div class="time-btn opacity5">{{$t('user.Enter')}}</div>
              <div class="time-bottom">
                <span>{{$t('user.SmartContractAddressz')}}</span>
                <img src="../assets/icon-more.svg" alt="">
              </div>
            </div> -->
            <!-- dj -->
          </div>
       </div>
     </div>
     <div class="bottom-bai">
      <homeBottom></homeBottom>
    </div> 
    <spin v-if="showSpin"></spin>
  </div>
</template>

<script>
import newNav from '../components/newNav'
import homeBottom from '../components/public/homeBottom'
import spin from '../components/public/spin'
import Web3 from 'web3'
export default {
  name: 'metaPool',
  data () {
    return {
      stakeNum:0,
      selNum:2,
      showGetpeth:false,
      account: null,
      incomeMFI: 0,
      userAddress: null,
      showApprove: true,
      thenumberstakedAll: [0,0],
      userStakedAmount: null,
      contributionAmount: null,
      totalMFI: null,
      isRegistered: null,
      hours: null,
      minutes: null,
      seconds: null,
      // hours7: null,
      // minutes7: null,
      // seconds7: null,
      showRegister:[false,false],
      showSpin:false,
      sevenTime:0,
      pethBalance:0,
      contractAbi:"",
      contractAddress:"",
      averageStake:[0,0],
      poolType: 2,         //矿池类型
      timer: null,
      showHarvest: false
    }
  },  
  components:{ newNav,homeBottom,spin },
  mounted() {
    ethereum.enable().then(accounts => {
      this.userAddress = accounts[0];
      this.contractAbi = this.utils.mfiAbi;
      this.contractAddress = this.utils.mfi2Address;
      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
          web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
      }
      this.getTime();
      this.getThenumberstakedAll(0);
      this.getThenumberstakedAll(1);
      this.getTotalMFI();
    })
  },
  beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
  },
  // 监听用矿池的类型
  watch: {
    poolType: function(val) {
      if(val == 1){
        this.contractAddress = this.utils.mfiAddress;
      }
      if(val == 2){
        this.contractAddress = this.utils.mfi2Address;
      }
    }
  },
  computed: {
    currentpETH() {
      return this.pethBalance;
    }
  },
  methods: {
    back() {
      this.showGetpeth = false;
    },
    //弹框提示
    boardCli(){
      this.$message.info(this.$t('user.Earlyreleasehe'));
    },
    getTotalMFI() {
      const contractAbi = this.utils.nfiDaiAbi;
      const contractAddress = this.utils.mfiaddressVal;
      const myContract = new web3.eth.Contract(contractAbi, contractAddress);
      myContract.methods.balanceOf(this.utils.mfi2Address).call()
        .then(result => {
          this.totalMFI = result;
        })
    },
    metaPoolDetail(type) {
      // 检查用户是否已经注册
      this.stakedBefore(type);
      // 使用pETH的合约地址           
      var contractAbi = this.utils.tranAbi;
      var contractAddress = this.utils.addressVal;  //合约地址
      var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
        from: this.userAddress, // default from address
      });
      myContract.methods.GetUserInfo(this.userAddress).call((error, data) => {
        if (data[0] === false) {
          this.$message.info(this.$t('user.PleaseRejister'));
          this.$router.push('metaboard/login');
        } else {
          // 进入pETH质押池页面
          this.getMfiInfo(type);
        }
      });
    },
    // 注册MFI
    registerMFI(type) {
      var that = this;
      if(localStorage.getItem('mfiRegister2'+that.userAddress) && localStorage.getItem('mfiRegister2'+that.userAddress) == 1){
        this.$message.info(this.$t('user.partner_d1'));
      }else{
        const mfiContract = new web3.eth.Contract(this.contractAbi, this.contractAddress, {
          from: this.userAddress
        })
        mfiContract.methods.Do_Registering().send(function(error, result){
          if(result){
            that.showSpin = true;
            localStorage.setItem('mfiRegister2'+that.userAddress,1);
            var setInterDing = setInterval(()=>{
              mfiContract.methods.Get_User_Info(that.userAddress).call()
                .then(res => {
                  // 用户是否注册MFI
                  that.isRegistered = res[0];
                  if (that.isRegistered) {  
                    clearInterval(setInterDing); 
                    that.showSpin = false;         
                    that.showGetpeth = true;
                    // 用户抵押数量
                    that.userStakedAmount = res[3];
                    // 其他人贡献人数
                    that.contributionAmount = res[4];
                  }
                })
            },2000)
            that.getIncomeMFI(type);
          }
        })
      }
    },
    //质押之前是否approve
    stakedBefore(type){      
      var that = this;
      const myContract = new web3.eth.Contract(this.utils.tranAbi, this.utils.addressVal, {
        from: this.userAddress
      });
      if(type == 1){
        var address = this.utils.mfiAddress
      }
      if(type == 2){
        var address = this.utils.mfi2Address
      }
      // 用户查询质押之前是否approve
      myContract.methods.allowance(this.userAddress,address).call()
        .then((result) => {
          if(result>0){
            that.showApprove = false;
            const myContract = new web3.eth.Contract(this.utils.tranAbi, this.utils.addressVal, {
              from: this.userAddress
            });
            myContract.methods.balanceOf(that.userAddress).call(function(error, red){
              if(that.utils.weiOneth(red)<0.15){
                that.stakeNum = 0;
              }else{
                that.stakeNum = that.utils.weiOneth(red);
              }
              that.pethBalance = that.utils.weiOneth(red);
            });
          }else{
            that.showApprove = true;
          }
        })
    },
    // 质押之前的操作
    approve() {
        var that = this; 
        if(localStorage.getItem('approveType2'+that.userAddress+that.poolType) && localStorage.getItem('approveType2'+that.userAddress+that.poolType) == 1){
          this.$message.info(this.$t('user.partner_d1'));
        }else{
          var contractAbi = this.utils.tranAbi;
          var contractAddress = this.utils.addressVal;  //合约地址
          var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
            from: this.userAddress, // default from address
            // gasPrice: '10000000000' // default gas price in wei, 10 gwei in this case
          });
          myContract.methods.approve(this.contractAddress, (Math.pow(2,256)-1).toString(16)).send((error, data) => {
            if (data) {
              that.showSpin = true;
              localStorage.setItem('approveType2'+that.userAddress+that.poolType,1)
              var setIn=setInterval(()=>{
                myContract.methods.allowance(that.userAddress,this.contractAddress).call()
                .then((result) => {
                  if(result>0){
                    clearInterval(setIn);
                    that.showSpin = false;
                    that.showApprove = false;
                  }
                })
              },1000)
            }
          });
        }
    },
    //点击质押
    stake() {
      var that = this;
      if (Number(that.stakeNum) < 0.15) {
        that.$message.info(that.$t('user.coledgenumber'));
      }else if(Number(that.stakeNum) > that.pethBalance){
        that.$message.info(that.$t('user.SusaldodepETH'));
      }else if(Number(that.stakeNum)+Number(that.utils.weiOneth(this.userStakedAmount)) > 0.3){
        that.$message.info(that.$t('user.Thtamountof'));
      }else{
        var myContract = new web3.eth.Contract(this.contractAbi, this.contractAddress, {
          from: that.userAddress
        });
        var time = (new Date()).valueOf();
        myContract.methods.Do_Stacking('0x'+(that.stakeNum*10e17).toString(16)).send(function(error, result){
          if(result){
            that.showSpin = true;
            var setIn=setInterval(()=>{
              web3.eth.getTransactionReceipt(result).then((res)=>{
                if(res && res.status){
                  clearInterval(setIn);
                  that.showSpin = false;
                  // 刷新数据
                  myContract.methods.Get_User_Info(that.userAddress).call((error, res) => {
                    // that.getIncomeMFI();
                    that.$nextTick(() => {
                      that.userStakedAmount = res[3];
                    })
                  })
                    // .then(res => {
                    //   // 用户是否注册MFI
                    //   that.isRegistered = res[0];
                    //   if (that.isRegistered) {   
                    //     that.getIncomeMFI();
                    //     // 用户抵押数量
                    //     that.userStakedAmount = res[3];
                    //     // 其他人贡献人数
                    //     that.contributionAmount = res[4];
                    //   }
                    // })
                }
              })
            },1000)
          }
        })
      }
    },
    //收获
    harvest() {
      const myContract = new web3.eth.Contract(this.contractAbi, this.contractAddress, {
        from: this.userAddress
      });
      // 用户查询收益
      myContract.methods.Do_Receiving().send()
        .then((result) => {
          this.$message.info(this.$t('user.HarvestSucceeded'));
        })
        .catch((error) => {
          this.$message.fail(this.$t('user.HarvestFailed'));
        })
    },
    // 解除质押
    harvestUnstake() {
       var that = this;
      if(that.userStakedAmount !== 0){
        const myContract = new web3.eth.Contract(this.contractAbi, this.contractAddress, {
          from: that.userAddress
          // gasPrice: '10000000000'
        });
        myContract.methods.Do_Unstacking(that.userStakedAmount).send(function(error, result){
          if(result){
            that.showSpin = true;
            var setIn=setInterval(()=>{
              web3.eth.getTransactionReceipt(result).then((res)=>{
                if(res && res.status){
                  clearInterval(setIn);
                  that.showSpin = false;
                   // 刷新数据
                   myContract.methods.Get_User_Info(that.userAddress).call((error, res) => {
                    // that.getIncomeMFI();
                    that.$nextTick(() => {
                      that.userStakedAmount = res[3];
                    })
                  })
                }
              })
            },1000)
          }
        })
      }else{
        that.$message.info(that.$t('user.Thledgumber'));
      }
    },
    getIncomeMFI(type) {
      if(type == 1){
        var contractAddress = this.utils.mfiAddress;
      }
      if(type == 2){
        var contractAddress = this.utils.mfi2Address;
      }
      const myContract = new web3.eth.Contract(this.contractAbi, contractAddress, {
        from: this.userAddress
      });
      myContract.methods.ViewReceiving(this.userAddress).call().then((result) => {
        this.incomeMFI = result;
      })
      this.timer = setInterval(()=>{
        // 用户查询收益
        myContract.methods.ViewReceiving(this.userAddress).call()
          .then((result) => {
            this.incomeMFI = result;
          })
      },15000)
      this.$once('hook:beforeDestroy', () => {            
        clearInterval(this.timer);                                    
      })
    },
    // 获取MFI用户信息
    getMfiInfo(type) {
      var that = this;
      this.poolType = type;      
      if(type == 1){
        var contractAddress = this.utils.mfiAddress;
      }
      if(type == 2){
        var contractAddress = this.utils.mfi2Address;
      }
      const mfiContract = new web3.eth.Contract(this.contractAbi, contractAddress, {
        from: this.userAddress
      })
      mfiContract.methods.Get_User_Info(this.userAddress).call()
        .then(result => {
          //抵押数量<其他人贡献数量
          if(Number(result[3])<Number(result[4])){
            that.showHarvest = true;
          }
          web3.eth.getBlockNumber().then((res)=>{
            if(res - result[5]<=40320){
              this.sevenTime = 0;
            }else{
              this.sevenTime = 1;
            }
          })
          // 用户是否注册MFI
          that.isRegistered = result[0];
          if (this.isRegistered === false) {
            if(localStorage.getItem('mfiRegister2'+this.userAddress) && localStorage.getItem('mfiRegister2'+this.userAddress) == 1){
              this.$message.info(this.$t('user.partner_d1'));
            }else{
              this.showRegister[this.poolType - 1] = true;
            }
          }else{            
            this.showGetpeth = true;
            this.getIncomeMFI(type);
          }
          // 用户抵押数量
          this.userStakedAmount = result[3];
          // 其他人贡献数量
          this.contributionAmount = result[4];
        })
    },
    // 获取总抵押数量
    getThenumberstakedAll(type) {
      var that = this;
      if(type==0){
        var contractAddress = this.utils.mfiAddress;
      }
      if(type==1){
        var contractAddress = this.utils.mfi2Address;
      }
      var myContract = new web3.eth.Contract(this.contractAbi, contractAddress);
      myContract.methods.Get_Game_Info().call()
        .then(result => {
          that.thenumberstakedAll[type] = result[0];
          // 取均值
          that.averageStake[type] = result[0] / result[1];
        })
    },
    jumpRule() {
      this.$router.push('metaboardRule')
    },
    // 活动时间
    getTime() {
      this.$http.get(`${this.utils.config}/metapool/other/final_countdown`).then((res)=>{
        this.secondToTimeStr(res.data.data);
        this.timeGo();
      })
    },
    secondToTimeStr(t) {
        if (!t) return;
        if (t < 60) {
            this.hours = '00';
            this.minutes = '00';
            this.seconds = (i = t) < 10 ? "0" + i : i;
            return
        }
        if (t < 3600) {
            this.hours = '00';
            this.minutes = (a = parseInt(t / 60)) < 10 ? "0" + a : a;
            this.seconds = (i = t % 60) < 10 ? "0" + i : i;
            return
        }
        if (3600 <= t) {
          var a, i, e = parseInt(t / 3600);
          this.hours = e < 10 ? "0" + e : e;
          this.minutes = (a = parseInt(t % 3600 / 60)) < 10 ? "0" + a : a;
          this.seconds = (i = t % 60) < 10 ? "0" + i : i;
          return
        }
      },
      timeGo(){
        setInterval(()=>{
          if(this.seconds <= 0){
            if(this.minutes <= 0){
              if(this.hours <= 0){
                return
              }else{
                this.hours-=1;
                this.minutes = 59;
                this.seconds = 59;
              }
            }else{
              this.minutes -= 1;
              this.seconds = 59;
            }
          }else{
            this.seconds -= 1;
          }
        },1000)
      }
  }
}
</script>

<style scoped lang="scss">
  .pointer-events{
    pointer-events: none;
    /* opacity: .3; */
    background-color: #8a8a8a!important;
  }
  .bordersty{
    border-radius: 10px!important;
  }
.colorfff{
  color: #fff !important;
}
.background-colorff7{
  background-color: #FF7200!important;
}
.background-color259{
  background-color: #259A01!important;
}
.font14{
  font-size: 14px;
}
.color5{
  color: rgba(255, 255, 255, .5);
}
.marginrignt44{
  margin-right: 44px;
}
.opacity5{
  opacity: .5;
}
@media only screen and (min-width: 0px) and (max-width: 639px){
  .boxOnly{
    height:124px!important;
    padding-top: 92px!important;
  }
  .metaPool-home{
    width: 100%;
    .bottom-bai{
      width: 100%;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
    .metaPool-menu{
      width: 100%;
      .metaPool-img1{
        width: 80px;
        margin-top: 240px;
        margin-bottom: 39px;
      }
      .metaPool-titleb{
        font-size: 30px;
        margin-bottom: 15px;
      }
      .metaPool-titles{
        font-size: 16px;
        color: rgba(255,255,255,.7);
        margin-bottom: 20px;
      }
      >div{
        >.left-arrow {
          color: #eeb32f;
          position: absolute;
          top: 150px;
          left: 25px;
        }
        >.metaPool-flex{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 44px 0px;
           >.flex-item3{
            width: 86%;
            height: 316px;
            margin:0 auto;
            padding: 35px 30px;
            background-color: #1D1D1D;
            border-radius: 10px;
            position: relative;
            margin-bottom: 15px;
            // 批准按钮
            >div {
              >.flex-btn{
                width: 100%;
                height: 40px;
                margin: 0 auto;
                line-height: 40px;
                background-color: #EFB133;
                border-radius: 10px;
                font-size: 16px;
                color: #000;
                margin-top: 130px;
                font-weight: bold;
                cursor: pointer;
              }
              >.flex-text{
              font-size: 48px;
              color: #EFB133;
              margin-bottom: 15px;
              }
              >.flex-menu{
                font-size: 14px;
                color: #EFB133;
                margin-bottom: 22px;
              }
              >.flex-balance {
                font-size: 12px;
                margin-top:10px;
              }
              .flex-input{
                position: relative;
                width: 280px;
                height: 40px;
                background-color: #535353;
                border-radius: 10px;
                margin: 0 auto;
                font-size: 16px;
                span{
                  position: absolute;
                  right: 100px;
                  top: 12px;
                  color:rgba(255, 255, 255, .5);
                }
                input{
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  border: none;
                  padding: 2px 15px;
                  background-color: rgba(0,0,0,0);
                  color:rgba(255, 255, 255, .5);
                  font-weight: bold;
                  outline: none;
                }
                div{
                  position: absolute;
                  right: 0px;
                  top: 0px;
                  width: 90px;
                  height: 100%;
                  line-height: 40px;
                  background-color: #fff;
                  border-radius: 10px;
                  color: #000;
                  cursor: pointer;
                  font-weight: bold;
                }
              }
            }
            >img{
              width: 110px;
              margin-top: 5px;
              margin-bottom: 10px;
            }
            >.warnImg{
              width: 30px;
              height: 30px;
              position: absolute;
              right: 10px;
              top: -31px;
            }
            >.flex-text{
              font-size: 48px;
              color: #EFB133;
              margin-bottom: 15px;
            }
            >.flex-menu{
              font-size: 14px;
              color: #EFB133;
              margin-bottom: 22px;
            }
            >.flex-btn{
              width: 288px;
              height: 40px;
              margin: 0 auto;
              line-height: 40px;
              background-color: #EFB133;
              border-radius: 10px;
              font-size: 16px;
              color: #000;
              cursor: pointer;
            }
            .flex-input{
              position: relative;
              width: 280px;
              height: 40px;
              background-color: #535353;
              border-radius: 10px;
              margin: 0 auto;
              font-size: 16px;
              span{
                position: absolute;
                right: 100px;
                top: 12px;
                color:rgba(255, 255, 255, .5);
              }
              input{
                display: inline-block;
                width: 100%;
                height: 100%;
                border: none;
                padding: 2px 15px;
                background-color: rgba(0,0,0,0);
                color:rgba(255, 255, 255, .5);
                font-weight: bold;
                outline: none;
              }
              div{
                position: absolute;
                right: 0px;
                top: 0px;
                width: 90px;
                height: 100%;
                line-height: 40px;
                background-color: #fff;
                border-radius: 10px;
                color: #000;
                cursor: pointer;
                font-weight: bold;
              }
            }
            >.flex-getLp{
              margin-top: 15px;
              font-size: 14px;
              >img{
                width: 10px;
                margin-left: 8px;
                position: relative;
                top: 6px;
              }
            }
          }
          >.flex-item1{
            width: 86%;
            height: 316px;
            margin:0 auto;
            background-color: #1D1D1D;
            border-radius: 10px;
            margin-bottom: 15px;
            position: relative;
            >div {
              >.imgtop-right {
                position: absolute;
                right: 0px;
                top: 0px;
                width: 125px;
              }
              .time{
                font-size: 16px;
                font-weight: bold;
                color: #000;
                position: absolute;
                right: 4px;
                top: 11px;
                transform: rotate(45deg);
                img{
                  width: 26px;
                }
                div{
                  text-align: center;
                }
              }
            }
            >img{
              width: 110px;
              margin-top: 40px;
              margin-bottom: 10px;
            }            
            >.warnImg{
              width: 30px;
              height: 30px;
              position: absolute;
              right: 10px;
              top: -31px;
            }
            >.flex-text{
              font-size: 26px;
              color: #EFB133;
              margin-bottom: 15px;
            }
            >.flex-menu{
              font-size: 12px;
              color: #EFB133;
              margin-bottom: 22px;
            }
            >.flex-btn{
              width: 240px;
              height: 40px;
              margin: 0 auto;
              line-height: 40px;
              background-color: #EFB133;
              font-weight: bold;
              border-radius: 10px;
              font-size: 16px;
              color: #000;
            }
            .flex-input{
              position: relative;
              width: 280px;
              height: 40px;
              background-color: #535353;
              border-radius: 10px;
              margin: 0 auto;
              font-size: 16px;
              span{
                position: absolute;
                right: 100px;
                top: 12px;
                color:rgba(255, 255, 255, .5);
              }
              input{
                display: inline-block;
                width: 100%;
                height: 100%;
                border: none;
                padding: 2px 15px;
                background-color: rgba(0,0,0,0);
                color:rgba(255, 255, 255, .5);
                font-weight: bold;
                outline: none;
              }
              div{
                position: absolute;
                right: 0px;
                top: 0px;
                width: 90px;
                height: 100%;
                line-height: 40px;
                background-color: #fff;
                border-radius: 10px;
                color: #000;
                cursor: pointer;
                font-weight: bold;
              }
            }
            >.flex-getLp{
              margin-top: 15px;
              font-size: 14px;
              >img{
                width: 10px;
                margin-left: 8px;
                position: relative;
                top: 6px;
              }
            }
          }
          >.flex-item2{
            width: 86%;
            height: 316px;
            margin:0 auto;
            margin-top: 20px;
            padding: 35px 30px;
            background-color: #1D1D1D;
            border-radius: 10px;
            >.item2-top{
              margin-bottom: 10px;
              >span{
                font-size: 26px;
              }
              >span:nth-child(2){
                margin: 0px 16px;
                font-size: 20px;
              }
            }
            >.item2-text{
              display: flex;
              justify-content: center;
              font-size: 16px;
              color: rgba(255, 255, 255, .5);
              margin-bottom: 15px;
              img{
                width: 13px;
                margin-left: 3px;
                position: relative;
                top: 6px;
              }
            }
            >.item2-title{
              text-align: left;
              font-size: 12px;
              color: rgba(255, 255, 255, .5);
              margin-bottom: 15px;
            }
            >.item2-bei{
              width: 100%;
              height: 26px;
              line-height: 26px;
              background-color: rgba(255, 255, 255, .2);
              border-radius: 5px;
              font-size: 12px;
              display: flex;
              margin-bottom: 10px;
              >div:nth-child(1){
                background-color: #FF0000;
                border-radius: 5px;
                padding: 0px 7px;
                display:inline-block;
              }
              >div:nth-child(2){
                margin-left: 15px;
                color: rgba(255, 255, 255, .5);
              }
            }
          }
        }
        >.metaPool-get{
          width: 80%;
          height: 46px;
          margin: 0 auto;
          line-height: 46px;
          border: 1px solid rgba(255, 255, 255, .5);
          border-radius: 10px;
          font-size: 16px;
          margin-top: 40px;
          margin-bottom: 24px;
        }
        >.metaPool-jump{
          font-size: 16px;
          padding-bottom: 110px;
          img{
            margin-left: 12px;
            width: 10px;
            position: relative;
            top: 8px;
          }
        }
        >.metaPool-balance{
          width: 290px;
          height: 324px;
          display: flex;
          flex-wrap: wrap;
          margin: 0 auto;
          background-color: #3E3E3E;
          border-radius: 10px;
          margin-bottom: 30px;
          >.balance-left{
            width: 100%;
            height: 80px;
            text-align: left;
            background-color: #EFB133;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            padding: 0px 18px;
            padding-top: 10px;
            font-size: 26px;
            color: #000;
            img{
              width: 35px;
              position: relative;
              top: 11px;
            }
          }
          >.balance-right{
            width: 100%;
            padding: 0px 0px 20px 18px;
            margin-top: -10px;
            display: flex;
            flex-wrap: wrap;
            >div{
              width: 100%;
              font-size: 24px;
              text-align: left;
            }
          }
        }
        >.metaPool-time{
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 96px;
          .time-ing:hover{
            border: 4px solid #EFB133;
          }
          >.time-ing,.time-end{
            width: 300px;
            margin: 0 auto;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 40px;
            position: relative;
            margin-bottom: 40px;
            .imgtop-left{
              position: absolute;
              left: 21px;
              top: 21px;
              width: 47px;
            }
            .imgtop-right{
              position: absolute;
              right: 0px;
              top: 0px;
              width: 125px;
            }
            .time{
              font-size: 16px;
              color: #000;
              font-weight: bold;
              position: absolute;
              right: 4px;
              top: 11px;
              transform: rotate(45deg);
              img{
                width: 26px;
              }
              div{
                text-align: center;
              }
            }
            .imgmiddle{
              width: 86px;
              margin-top: 58px;
              margin-bottom: 27px;
            }
            .time-text1{
              font-size: 18px;
              margin-bottom: 23px;
            }
            .time-text2{
              font-size: 36px;
              color: #FEDD4F;
              margin-bottom: 10px;
              >span:nth-child(2){
                font-size: 14px;
              }
            }
            .time-text3{
              font-size: 14px;
              color: #FEDD4F;
              margin-bottom: 46px;
            }
            .time-btn{
              width: 240px;
              height: 40px;
              line-height: 40px;
              margin: 0 auto;
              font-weight: bold;
              background-color: #EFB133;
              border-radius: 10px;
              font-size: 16px;
              color: #000;
              margin-bottom: 30px;
              cursor: pointer;
            }
            .time-bottom{
              cursor: pointer;
              margin-bottom: 45px;
              span{
                font-size: 16px;
                color: #FEFEFE;
                margin-right: 6px;
              }
              img{
                width: 9px;
                position: relative;
                top: 14px;
              }
            }
          }
          >.time-end{
            .time{
              font-size: 16px;
              position: absolute;
              right: 12px;
              top: 11px;
              transform: rotate(45deg);
              img{
                width: 25px;
              }
              div{
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}


@media only screen and (min-width: 640px) {
  .boxOnly{
    padding-top: 180px;
  }
  .metaPool-home{
    width: 100%;
    .bottom-bai{
      width: 1200px;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
    .metaPool-menu{
      width: 1200px;
      margin: 0 auto;
      .metaPool-img1{
        width: 80px;
        margin-top: 240px;
        margin-bottom: 39px;
      }
      .metaPool-titleb{
        font-size: 50px;
        margin-bottom: 15px;
      }
      .metaPool-titles{
        font-size: 20px;
        color: rgba(255,255,255,.7);
        margin-bottom: 20px;
      }
      // 回退箭头
      >div{
        >.left-arrow {
          font-size: 26px;
          color: #eeb32f;
          position: absolute;
          top: 150px;
          left: 100px;
        }
        >.metaPool-flex{
          display: flex;
          justify-content: space-between;
          padding: 44px 0px;
          >.flex-item1{
            width: 426px;
            height: 316px;
            background-color: #1D1D1D;
            border-radius: 10px 40px 10px 10px;
            position: relative;
            >div {
              >.imgtop-right {
                position: absolute;
                right: 0px;
                top: 0px;
                width: 125px;
              }
              .time{
                font-size: 16px;
                color: #000;
                font-weight: bold;
                position: absolute;
                right: 4px;
                top: 11px;
                transform: rotate(45deg);
                img{
                  width: 26px;
                }
                div{
                  text-align: center;
                }
              }
            }
            >img{
              width: 110px;
              margin-top: 40px;
              margin-bottom: 10px;
            }
            >.warnImg{
              width: 30px;
              height: 30px;
              position: absolute;
              right: 10px;
              top: -31px;
            }
            >.flex-text{
              font-size: 48px;
              color: #EFB133;
              margin-bottom: 15px;
            }
            >.flex-menu{
              font-size: 14px;
              color: #EFB133;
              margin-bottom: 22px;
            }
            >.flex-btn{
              width: 288px;
              height: 40px;
              margin: 0 auto;
              line-height: 40px;
              background-color: #EFB133;
              border-radius: 10px;
              font-size: 16px;
              color: #000;
              cursor: pointer;
            }
            .flex-input{
              position: relative;
              width: 280px;
              height: 40px;
              background-color: #535353;
              border-radius: 10px;
              margin: 0 auto;
              font-size: 16px;
              span{
                position: absolute;
                right: 100px;
                top: 12px;
                color:rgba(255, 255, 255, .5);
              }
              input{
                display: inline-block;
                width: 100%;
                height: 100%;
                border: none;
                padding: 2px 15px;
                background-color: rgba(0,0,0,0);
                color:rgba(255, 255, 255, .5);
                font-weight: bold;
                outline: none;
              }
              div{
                position: absolute;
                right: 0px;
                top: 0px;
                width: 90px;
                height: 100%;
                line-height: 40px;
                background-color: #fff;
                border-radius: 10px;
                color: #000;
                cursor: pointer;
                font-weight: bold;
              }
            }
            >.flex-getLp{
              margin-top: 15px;
              font-size: 14px;
              >img{
                width: 10px;
                margin-left: 8px;
                position: relative;
                top: 6px;
              }
            }
          }
           >.flex-item3{
            width: 426px;
            height: 316px;
            background-color: #1D1D1D;
            border-radius: 10px;
            position: relative;
            // 批准按钮
            >div {
              >.flex-btn{
                width: 288px;
                height: 40px;
                margin: 0 auto;
                line-height: 40px;
                background-color: #EFB133;
                border-radius: 10px;
                font-size: 16px;
                color: #000;
                margin-top: 130px;
                font-weight: bold;
                cursor: pointer;
              }
              >.flex-text{
              font-size: 48px;
              color: #EFB133;
              margin-bottom: 15px;
              }
              >.flex-menu{
                font-size: 14px;
                color: #EFB133;
                margin-bottom: 22px;
              }
              >.flex-balance {
                font-size: 12px;
                margin-top:10px;
              }
              .flex-input{
                position: relative;
                width: 280px;
                height: 40px;
                background-color: #535353;
                border-radius: 10px;
                margin: 0 auto;
                font-size: 16px;
                span{
                  position: absolute;
                  right: 100px;
                  top: 12px;
                  color:rgba(255, 255, 255, .5);
                }
                input{
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  border: none;
                  padding: 2px 15px;
                  background-color: rgba(0,0,0,0);
                  color:rgba(255, 255, 255, .5);
                  font-weight: bold;
                  outline: none;
                }
                div{
                  position: absolute;
                  right: 0px;
                  top: 0px;
                  width: 90px;
                  height: 100%;
                  line-height: 40px;
                  background-color: #fff;
                  border-radius: 10px;
                  color: #000;
                  cursor: pointer;
                  font-weight: bold;
                }
              }
            }
            >img{
              width: 110px;
              margin-top: 40px;
              margin-bottom: 10px;
            }
            >.warnImg{
              width: 30px;
              height: 30px;
              position: absolute;
              right: 10px;
              top: -31px;
            }
            >.flex-text{
              font-size: 48px;
              color: #EFB133;
              margin-bottom: 15px;
            }
            >.flex-menu{
              font-size: 14px;
              color: #EFB133;
              margin-bottom: 22px;
            }
            >.flex-btn{
              width: 288px;
              height: 40px;
              margin: 0 auto;
              line-height: 40px;
              background-color: #EFB133;
              border-radius: 10px;
              font-size: 16px;
              color: #000;
              cursor: pointer;
            }
            .flex-input{
              position: relative;
              width: 280px;
              height: 40px;
              background-color: #535353;
              border-radius: 10px;
              margin: 0 auto;
              font-size: 16px;
              span{
                position: absolute;
                right: 100px;
                top: 12px;
                color:rgba(255, 255, 255, .5);
              }
              input{
                display: inline-block;
                width: 100%;
                height: 100%;
                border: none;
                padding: 2px 15px;
                background-color: rgba(0,0,0,0);
                color:rgba(255, 255, 255, .5);
                font-weight: bold;
                outline: none;
              }
              div{
                position: absolute;
                right: 0px;
                top: 0px;
                width: 90px;
                height: 100%;
                line-height: 40px;
                background-color: #fff;
                border-radius: 10px;
                color: #000;
                cursor: pointer;
                font-weight: bold;
              }
            }
            >.flex-getLp{
              margin-top: 15px;
              font-size: 14px;
              >img{
                width: 10px;
                margin-left: 8px;
                position: relative;
                top: 6px;
              }
            }
          }
          >.flex-item2{
            width: 290px;
            height: 316px;
            padding: 35px 30px;
            background-color: #1D1D1D;
            border-radius: 10px;
            >.item2-top{
              margin-bottom: 10px;
              >span{
                font-size: 32px;
              }
              >span:nth-child(2){
                margin: 0px 16px;
                font-size: 20px;
              }
            }
            >.item2-text{
              display: flex;
              justify-content: center;
              font-size: 16px;
              color: rgba(255, 255, 255, .5);
              margin-bottom: 15px;
              img{
                width: 13px;
                margin-left: 3px;
                position: relative;
                top: 6px;
              }
            }
            >.item2-title{
              text-align: left;
              font-size: 12px;
              color: rgba(255, 255, 255, .5);
              margin-bottom: 15px;
            }
            >.item2-bei{
              width: 100%;
              height: 26px;
              line-height: 26px;
              background-color: rgba(255, 255, 255, .2);
              border-radius: 5px;
              font-size: 12px;
              display: flex;
              margin-bottom: 10px;
              >div:nth-child(1){
                background-color: #FF0000;
                border-radius: 5px;
                padding: 0px 7px;
                display:inline-block;
              }
              >div:nth-child(2){
                margin-left: 15px;
                color: rgba(255, 255, 255, .5);
              }
            }
          }
        }
        >.metaPool-get{
          width: 754px;
          height: 46px;
          margin: 0 auto;
          line-height: 46px;
          border: 1px solid rgba(255, 255, 255, .5);
          border-radius: 10px;
          font-size: 16px;
          margin-top: 40px;
          margin-bottom: 24px;
        }
        >.metaPool-jump{
          font-size: 16px;
          padding-bottom: 110px;
          img{
            margin-left: 12px;
            width: 10px;
            position: relative;
            top: 8px;
          }
        }
        >.metaPool-balance{
          width: 864px;
          height: 130px;
          display: flex;
          margin: 0 auto;
          background-color: #3E3E3E;
          border-radius: 10px;
          margin-bottom: 30px;
          >.balance-left{
            width: 337px;
            height: 100%;
            background-color: #EFB133;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            padding: 30px 22px;
            font-size: 36px;
            color: #000;
            img{
              width: 50px;
            }
          }
          >.balance-right{
            width: calc(100% - 337px);
            padding: 36px 30px;
            display: flex;
            justify-content: space-between;
            >div{
              font-size: 24px;
              text-align: left;
            }
          }
        }
        >.metaPool-time{
          display: flex;
          justify-content: center;
          padding-bottom: 96px;
          .time-ing:hover{
            border: 4px solid #EFB133;
          }
          >.time-ing,.time-end{
            width: 370px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 40px;
            position: relative;
            .imgtop-left{
              position: absolute;
              left: 21px;
              top: 21px;
              width: 47px;
            }
            .imgtop-right{
              position: absolute;
              right: 0px;
              top: 0px;
              width: 125px;
            }
            .time{
              font-size: 16px;
              font-weight: bold;
              color: black;
              position: absolute;
              right: -4px;
              top: 11px;
              transform: rotate(45deg);
              img{
                width: 26px;
              }
              div{
                text-align: center;
              }
            }
            .imgmiddle{
              width: 86px;
              margin-top: 58px;
              margin-bottom: 27px;
            }
            .time-text1{
              font-size: 24px;
              margin-bottom: 23px;
            }
            .time-text2{
              font-size: 48px;
              color: #FEDD4F;
              margin-bottom: 10px;
              >span:nth-child(2){
                font-size: 24px;
              }
            }
            .time-text3{
              font-size: 16px;
              color: #FEDD4F;
              margin-bottom: 46px;
            }
            .time-btn{
              width: 288px;
              height: 40px;
              line-height: 40px;
              margin: 0 auto;
              font-weight: bold;
              background-color: #EFB133;
              border-radius: 10px;
              font-size: 16px;
              color: #000;
              margin-bottom: 30px;
              cursor: pointer;
            }
            .time-bottom{
              cursor: pointer;
              margin-bottom: 45px;
              span{
                font-size: 14px;
                color: #FEFEFE;
                margin-right: 6px;
              }
              img{
                width: 9px;
                position: relative;
                top: 14px;
              }
            }
          }
          >.time-end{
            .time{
              font-size: 16px;
              position: absolute;
              right: 12px;
              top: 11px;
              transform: rotate(45deg);
              img{
                width: 25px;
              }
              div{
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}

</style>
